import React, {useEffect, useState} from 'react';
import { Paper, Typography, FormControl, RadioGroup, FormControlLabel, Radio, Button, Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import { totalQuizAmount } from '../pages/Go';
// 自定义内容区域样式
const ContentContainer = styled(Box)(({ theme }) => ({
  // padding: theme.spacing(0),
  width: '100%',
  maxWidth: 600,
  margin: '0 auto', 
}));

const QuizPage = ({ currentQuestionIndex, currentQuestionNumber, currentQuiz, quizStat,
   userAnswers, showAnswer, onAnswerChange, onButtonClick }) => {
    const answer = userAnswers[currentQuestionIndex];

  return (
    <ContentContainer>
      <Paper elevation={3} sx={{ p: 3 }}>
        <Typography variant="h6" gutterBottom>
          {currentQuiz.question} 
        </Typography>
        <Typography variant="body2" gutterBottom>
          问题 {currentQuestionNumber} / {totalQuizAmount} / {quizStat.answeredAmount + currentQuestionNumber - 1} / {quizStat.quizAmount}
        </Typography>
        <FormControl component="fieldset">
          <RadioGroup value={answer !== undefined ? answer : ''} onChange={onAnswerChange}>
            {currentQuiz.options.map((option, index) => (
              <FormControlLabel
                key={index}
                value={index}
                control={<Radio />}
                label={option}
                disabled={showAnswer}
                sx={{
                  ...(showAnswer && {
                    color: option === currentQuiz.correctAnswerIndex == index
                      ? 'success.main' 
                      : (userAnswers[currentQuestionIndex] === option ? 'error.main' : 'inherit'),
                  }),
                }}
              />
            ))}
          </RadioGroup>
        </FormControl>
        
        <Button
          variant="contained"
          fullWidth
          onClick={onButtonClick}
          sx={{ mt: 2 }}
          disabled={!userAnswers[currentQuestionIndex] && !showAnswer}
        >
          {showAnswer ? '下一题' : '查看答案'}
        </Button>

        {showAnswer && (
          <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
            <Typography variant="subtitle1">正确答案：</Typography>
            <Typography variant="body2">{currentQuiz.options[currentQuiz.correctAnswerIndex]}</Typography>
            <Typography variant="subtitle1">答案解释：</Typography>
            <Typography variant="body2">{currentQuiz.explanation}</Typography>
          </Box>
        )}
      </Paper>
    </ContentContainer>
  );
};

export default QuizPage;